<template lang="html">
    <div class="container" v-loading="loading">
        <div class="search">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                  <el-input class="form_input" v-model="searchText" placeholder="请输入部位名称"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="small" @click="onSubmit">搜索</el-button>
                  <el-button type="primary" size="small" @click="onAddtion">新增</el-button>
                  <el-button type="danger" :disabled="isDisabled" size="small" @click="onBatch">批量删除</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="tables">
          <el-table :data="tableData" :row-class-name="rowStyle" @selection-change="handleSelectionChange" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%">
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column prop="sort" label="序号" align="center" width="80"></el-table-column>
                <el-table-column prop="sketchUrl" label="量体图片" align="center"  width="150">
                  <template slot-scope="scope">
                    <div class="body_img">
                      <img :src="scope.row.sketchUrl" alt="">
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="positionName" label="名称" align="center"></el-table-column>
                <el-table-column prop="positionContent" label="介绍" align="center"></el-table-column>
                <el-table-column prop="maxReference" label="最大参考值" align="center"></el-table-column>
                <el-table-column prop="minReference" label="最小参考值" align="center"></el-table-column>
                <el-table-column label="状态" align="center" width="100">
                  <template slot-scope="scope">
                      <el-switch @change="onSwitch(scope.row)" v-model="scope.row.opState" :active-value="1" :inactive-value="2" active-color="#4196FF" inactive-color="#D7D7D7"></el-switch>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="300">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="fEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="fDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
          </el-table>
          <pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currentPage="currentPage" :totalPage="totalPage" />
        </div>

        <el-dialog :title="dialogTitle" v-loading="loading" append-to-body :visible.sync="dialogVisible" width="30%">
            <div class="form">
                <div class="form_item">
                    <span> <i>*</i> 部位名称</span>
                    <el-input v-model="dialogForm.positionName"></el-input>
                </div>
                <div class="form_item">
                    <span> <i>*</i> 部位序号</span>
                    <el-input type="number" v-model="dialogForm.sort"></el-input>
                </div>
                <div class="form_item">
                    <span> <i>*</i> 部位介绍</span>
                    <el-input v-model="dialogForm.positionContent"></el-input>
                </div>
                <div class="form_item">
                    <span> <i>*</i> 最大参考值</span>
                    <el-input type="number" v-model="dialogForm.maxReference"></el-input>
                </div>
                <div class="form_item">
                    <span> <i>*</i> 最小参考值</span>
                    <el-input type="number" v-model="dialogForm.minReference"></el-input>
                </div>
                <div class="form_item">
                    <span> <i>*</i> 上传示意图</span>
                    <div class="images">
                      <el-upload action="" class="upload_img" :auto-upload="false" :file-list="fileList" list-type="picture-card" :on-remove="handleRemoveFile" :on-change="handlePreview">
                          <i class="el-icon-plus"></i>
                      </el-upload>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
  data(){
    return {
      loading:false,
      dialogTitle:'',
      searchText: '',
      currentPage: 1,
      totalPage: 0,
      pageSize: 10,
      tableData: [],
      currentData: [],
      dialogVisible: false,
      dialogForm: {},
      fileList: [],
      file:null
    }
  },
  computed:{
    isDisabled:function() {
      return this.currentData.length>0?false:true;
    },
  },
  created(){
    this.selectPositionPage();
  },
  methods:{
    selectPositionPage(){
      this.loading = true;
      this.$http.selectPositionPage({
        query: this.searchText,
        pageSize: this.pageSize,
        pageNumber: this.currentPage
      }).then(res=>{
        this.tableData = res.data.rows;
        this.totalPage = res.data.total;
        this.pageSize = res.data.pageSize;
        this.loading = false;
      });

    },
    handleSizeChange(e){
      this.pageSize = e;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(e){
      this.currentPage = e;
      this.selectPositionPage();
    },
    rowStyle({row,rowIndex}) {
      for(let i=0;i<this.currentData.length;i++){
        if(rowIndex == this.currentData[i].id){
          return 'row_style';
        }
      }
    },
    handlePreview(file){
      this.file = file.raw;
      this.fileList.push({url: file.url});
    },
    handleRemoveFile(file){
      this.file = null;
      this.fileList = [];
    },
    handleSelectionChange(e){
      this.currentData = [];
      this.currentData = this.currentData.concat(e);
    },
    onBatch(){
      let aId = [];
      this.currentData.forEach(item=>{aId.push(item.id)});
      this.$confirm('您确定要删除这些数据吗？').then(res=>{
        return this.$http.deletePositions({ids:aId.join(',')})
      }).then(res=>{
        if(res.data.code == 0){
          this.$message.success('删除成功');
          this.selectPositionPage();
        }else{
          this.$message.error(res.data.message);
        }
      }).catch(e=>0);
    },
    onSubmit(){
      this.handleCurrentChange(1);
    },
    insertPosition(formData){
      this.loading = true;
      this.$http.insertPosition(formData).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.$message.success(res.data.message);
          this.selectPositionPage();
          this.dialogVisible = false;
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    updatePosition(formData){
      this.loading = true;
      this.$http.updatePosition(formData).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.$message.success(res.data.message);
          this.selectPositionPage();
          this.dialogVisible = false;
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    confirm(){
      if(!this.dialogForm.positionName){
        this.$message.error('请填写部位名称！');
        return false;
      }else if(!this.dialogForm.sort){
        this.$message.error('请填写部位序号！');
        return false;
      }else if(!this.dialogForm.positionContent){
        this.$message.error('请填写部位介绍！');
        return false;
      }else if(!this.dialogForm.maxReference){
        this.$message.error('请填写最大值！');
        return false;
      }else if(!this.dialogForm.minReference){
        this.$message.error('请填写最小值！');
        return false;
      }else if(!this.fileList[0]){
        this.$message.error('请上传示意图！');
        return false;
      }
      let data = {
        file: this.file,
        sort: this.dialogForm.sort,
        positionName: this.dialogForm.positionName,
        positionContent: this.dialogForm.positionContent,
        maxReference: this.dialogForm.maxReference,
        minReference: this.dialogForm.minReference,
      };
      let formData = new FormData();
      for(let attr in data){
          formData.append(attr,data[attr]);
      }
      if(this.dialogTitle == '编辑量体部位'){
        formData.append('id',this.dialogForm.id);
        this.updatePosition(formData);
      }else{
        this.insertPosition(formData);
      }
    },
    fEdit(e){
      this.dialogTitle = '编辑量体部位';
      this.dialogForm = e;
      this.fileList.push({url: e.sketchUrl});
      this.dialogVisible = true;
    },
    onAddtion(){
      this.dialogTitle = '新增量体部位';
      this.dialogForm = {};
      this.fileList = [];
      this.dialogVisible = true;
    },
    onSwitch(e){
      this.$http.closePosition({id: e.id,opState:e.opState}).then(res=>{
        if(res.data.code===0){
            this.$message.success(res.data.message);
        }else{
            this.$message.error(res.data.message);
        }
      })
    },
    fDelete(e){
      this.$confirm('您确定要删除这条数据吗？').then(res=>{
         this.$http.deletePosition({id:e.id}).then(res=>{
             if(res.data.code == 0){
               this.$message.success('删除成功');
               this.selectPositionPage();
             }else{
               this.$message.error(res.data.message);
             }
         })
      }).catch(e=>0);
    },
  }

}
</script>

<style lang="css" scoped>
i{font-style: normal;color:#FB3F3F}
/deep/.el-table .row_style{
  background-color: #f8f8f8 !important;
}

.form .form_item{
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.form .form_item>span:nth-of-type(1){
  font-size: 13px;
  color: #333333;
  margin-right: 10px;
  width: 100px;
}
.form .form_tag{
  margin-right: 10px;
}
.upload_img{
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin-right: 10px;
}
/deep/.upload_img .el-upload-list--picture-card .el-upload-list__item{
  width: 100%;
  height: 100%;
}
/deep/.upload_img .el-upload{
  width: 100px;
  height: 100px;
  line-height: 110px;
}
.images{
  width: 100%;
  margin-top: 10px;
}
.body_img{
  width: 100%;
  height: 90px;
  display: flex;
  justify-content: center;
}
.body_img img{
  height: 100%;
  display: block;
}
</style>
